<div class="toolbar-notification-container">
  <button mat-icon-button (click)="toggleDropdown()" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
    <mat-icon>notifications_none</mat-icon>
    <span class="badge" *ngIf="notifications.length !== 0">{{ notifications?.length }}</span>
  </button>

  <div class="dropdown mat-elevation-z1" [class.open]="isOpen">
    <div class="card">
      <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
        <div class="title">
          <div class="name">通知</div>
          <div class="extra">您有 {{ notifications?.length }} 条新的通知</div>
        </div>
        <button type="button" mat-icon-button>
          <mat-icon class="icon">settings</mat-icon>
        </button>
      </div>
      <div *ngIf="notifications.length !== 0; then thenBlock else elseBlock;"></div>
      <div class="footer" fxLayout="row" fxLayoutAlign="center center">
        <div class="action">查看所以通知</div>
      </div>
    </div>
  </div>
</div>


<ng-template #thenBlock>
  <perfect-scrollbar class="content">
    <ng-container *ngFor="let notification of notifications; last as isLast">
      <div class="notice" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
        <mat-icon class="icon">notifications</mat-icon>
        <div class="title" fxLayout="column">
          <div class="name">{{ notification.title }}</div>
          <div class="time">{{ notification.lastTime }}</div>
        </div>
        <span fxFlex></span>
        <button type="button" mat-icon-button (click)="delete(notification)">
          <mat-icon class="close">close</mat-icon>
        </button>
      </div>
      <div class="divider" *ngIf="!isLast"></div>
    </ng-container>
  </perfect-scrollbar>
</ng-template>

<ng-template #elseBlock>
  <div class="no" fxLayout="row" fxLayoutAlign="center center">暂无通知</div>
</ng-template>
